<template>
  <div class="selectPar"
       v-if="options.length > 0">
    <a-select class="marginRight16"
              v-model="valDefault"
              :style="style"
              :default-value="valDefault"
              :getPopupContainer="(triggerNode) => triggerNode.parentNode">
      <a-select-option v-for="(item, index) in options"
                       :key="index"
                       :value="item.value"
                       @click="downClick(item)">
        {{item.value}}
      </a-select-option>
    </a-select>
  </div>
</template>

<script>
export default {
  props: ['options', 'downType', 'width', 'ajaxParam'],
  data () {
    return {
      valDefault: ''
    }
  },
  watch: {
    // options: {
    //   handler: function (value) {
    //     if (value.length > 0) {
    //       //   if (this.downDefault) {
    //       // this.valDefault = this.downDefault
    //       //   } else {
    //       this.valDefault = this.options[0].value
    //       //   }
    //     }
    //   },
    //   deep: true
    // },
    ajaxParam: {
      handler: function (result) {
        if (this.downType === 'wry') {
          this.valDefault = result.wryName
        } else if (this.downType === 'timeLx') {
          this.valDefault = result.timeLxName
        } else if (this.downType === 'temLx') {
          this.valDefault = result.temLxName
        } else {
          const downType = this.downType
          this.valDefault = result[downType]
        }
      },
      deep: true
    }
    // downDefault: function () {
    //   const downDefaultVal = this.downDefault
    //   if (downDefaultVal) {
    //     this.valDefault = downDefaultVal
    //   }
    // }
  },
  computed: {
    style: function () {
      if (this.width) {
        return `width:${this.width}`
      } else {
        return 'width:auto'
      }
    }
  },
  mounted () {
    // if (this.downDefault) {
    //   this.valDefault = this.downDefault
    // } else {
    if ((this.options).length > 0) {
      this.valDefault = this.options[0].value
    }
    // }
  },
  methods: {
    downClick: function (item) {
      this.valDefault = item.value
      this.$emit('downClickPar', this.valDefault, this.downType)
    }
  }
}
</script>

<style lang="less" scoped>
.selectPar {
  position: relative;
}
</style>
